<template>
  <div class="home">
    <HomeHeader />
    <HomeSwiper :swiperList="swiperList" />
    <Icons :iconsList="iconsList" />
    <Location />
    <Activity />
    <Hot :hotList="hotList" />
    <Like :likeList="likeList" />
    <Vacation :vacList="vacList" />
  </div>
</template>

<script>
import { mapState } from "vuex";
import HomeHeader from "./pages/Header.vue";
import HomeSwiper from "./pages/Swiper.vue";
import Icons from "./pages/Icons";
import Location from "./pages/Location";
import Activity from "./pages/Activity";
import Hot from "./pages/Hot";
import Like from "./pages/Like";
import Vacation from "./pages/Vacation";
export default {
  components: {
    HomeHeader,
    HomeSwiper,
    Icons,
    Location,
    Activity,
    Hot,
    Like,
    Vacation
  },
  data() {
    return {
      swiperList: [],
      hotList: [],
      likeList: [],
      vacList: [],
      iconsList: [],
      changeCity:''
    };
  },
  computed: {
    ...mapState(["city"])
  },
  methods: {
    getHttp() {
      this.$http.get("/api/dataHome.json").then(res => {
        // console.log(res);
        const data = res.data.data;
        data.forEach((item,index) => {
          if(item.city == this.city){
            console.log(item);
            this.swiperList = item.swiperList;
            this.hotList = item.hotList;
            this.likeList = item.likeList;
            this.vacList = item.vacList;
            this.iconsList = item.iconsList;
          }
        });
      });
    }
  },
  mounted() {
    this.changeCity=this.city
    this.getHttp();
  },
  activated(){
    if ( this.changeCity!=this.city) {
     this.getHttp();
      this.changeCity=this.city
    }
  }
};
</script>

<style>
.home {
  background: rgb(235, 232, 232);
}
</style>
